<template>
  <div class="hello">
    <App></App>
    <x-header>我要反馈</x-header>
    <form>
      <group title="输入反馈意见" label-margin-right="2em" label-align="right">
        <x-textarea :placeholder="valuePlaceholder" novalidate :icon-type="valueIconType" v-model="value" required></x-textarea>
      </group>
      <box gap="10px 10px">
      <x-button type="primary" @click.native="insertBack" action-type="button">提交</x-button>
      </box>
    </form>
  </div>
</template>
<script>
import App from '../../App'
import { XHeader, TransferDom, Cell, CellBox, CellFormPreview, Group, Badge, XButton, Box, XTextarea, ConfirmPlugin } from 'vux'
import Vue from 'vue'
Vue.use(ConfirmPlugin)

export default {
  name: 'ApiCenter',
  directives: {
    TransferDom
  },
  components: {
    App,
    XHeader,
    Group,
    Cell,
    CellFormPreview,
    CellBox,
    Badge,
    XButton,
    Box,
    XTextarea
  },
  data () {
    return {
      value: '',
      valueIconType: '',
      valuePlaceholder: '输入反馈意见'
    }
  },
  methods: {
    insertBack () {
      var value = this.value
      if (Object.is(value, '')) {
        this.valueIconType = 'error'
        this.valuePlaceholder = '反馈意见不能为空'
        return
      }
      this.$vux.confirm.show({
        title: '提示',
        content: '确认提交反馈吗？',
        onShow () {
          console.log('plugin show')
        },
        onHide () {
          console.log('plugin hide')
        },
        onCancel () {
          console.log('plugin cancel')
        },
        onConfirm () {
          console.log('plugin confirm')
        }
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

